<!-- 商品管理-SPU管理 -->
<template>
    <Category :show="show" />
    <el-card>
        <!-- 显示SPU列表 -->
        <div v-show="!show">
            <!--  :disabled="!categoryStore.c3" -->
            <el-button @click="addSpu" type="primary" icon="Plus" v-hasButton="'add'">添加SPU</el-button>
            <el-table border :data="records">
                <el-table-column type="index" label="序号" width="80px">
                </el-table-column>
                <el-table-column label="SPU名称" prop="spuName">
                </el-table-column>
                <el-table-column label="SPU描述" prop="description" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作">
                    <template #="{ row, $index }">
                        <el-button size="small" type="primary" icon="Plus" title="添加SKU" @click="show = 2" v-hasButton="'addsku'"></el-button>
                        <el-button @click="editSpu(row)" size="small" type="warning" icon="Edit" title="修改SPU" v-hasButton="'update'"></el-button>
                        <el-button size="small" type="info" icon="View" title="查看SKU列表"
                            @click="getSkuList(row.id)"></el-button>
                        <el-popconfirm :title="`确认删除 ${row.spuName} ?`" width="auto" @confirm="onDeleteSpu(row.id)" v-hasButton="'delete'">
                            <template #reference>
                                <el-button size="small" type="danger" icon="Delete" title="删除SPU"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination v-model:current-page="pageNo" @current-change="getSpuList" @size-change="getSpuList"
                v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 9]" :background="true"
                layout=" prev, pager, next, jumper, ->,  sizes, total" :total="total" />
        </div>
        <!-- 添加/修改SPU -->
        <SpuForm ref="spuCom" v-show="show == 1" @changeSceneSon="changeSceneFather" />
        <!-- 添加/修改SKU -->
        <SkuForm v-show="show == 2" @changeSceneSon="changeSceneFather" />
        <!-- 显示对应spu的sku列表 -->
        <el-dialog title="SKU列表" v-model="dialogVisible">
            <el-table :data="skuArr" border>
                <el-table-column prop="skuName" label="名称">
                </el-table-column>
                <el-table-column prop="price" label="价格">
                </el-table-column>
                <el-table-column prop="weight" label="重量">
                </el-table-column>
                <el-table-column label="图片">
                    <template #="{ row, $index }">
                        <el-image :src="row.skuDefaultImg" fit="contain" />
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </el-card>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, watch } from 'vue'
import useCategoryStore from '@/store/modules/category'
import { reqGetSPU, reqSkuListBySpuId, reqDeleteSpu } from '@/api/product/spu'
import type { Records, GetSpuResData, SpuData, resSkuInfo, SkuData } from '@/api/product/spu/type'
import SpuForm from './spuform.vue'
import SkuForm from './skuform.vue'
import { ElMessage } from 'element-plus'
// 三级分类仓库
let categoryStore = useCategoryStore()
// 三级分类select是否锁定、控制哪个el-card显示（0-spu列表、1-添加/修改spu、2-添加/修改sku）
let show = ref<number>(0)
// 分页器当前页码
let pageNo = ref<number>(1)
// 每页展示几条数据
let pageSize = ref<number>(3)
// spu总个数
let total = ref<number>(0)
// spu列表
let records = ref<Records>([])
// spu组件实例
let spuCom = ref<any>()

// 路由组件销毁前，清空仓库
onBeforeUnmount(()=>{
    categoryStore.$reset();
})

// 监听第三级分类变化
watch(() => categoryStore.c3, () => {
    if (!categoryStore.c3) return;
    getSpuList();
})

// 获取spu属性列表
const getSpuList = async (pager = 1) => {
    pageNo.value = pager
    let result: GetSpuResData = await reqGetSPU(pageNo.value, pageSize.value, categoryStore.c3);
    if (result.code == 200) {
        records.value = result.data.records
        total.value = result.data.total
    }
}

// 添加spu
const addSpu = () => {
    // 切换到spuform
    show.value = 1
    // 传递第三级分类id
    spuCom.value.initSpuData(true, categoryStore.c3);
}

// 修改spu
const editSpu = (row: SpuData) => {
    // 切换到spuform
    show.value = 1
    // 调用spu子组件获取spu数据
    spuCom.value.initSpuData(false, row);
}

// 调用子组件的方法
const changeSceneFather = (value: boolean) => {
    // 切换到当前
    show.value = 0
    // value=true则为“添加spu”，重新获取第一页
    if (value) getSpuList();
    // value=false则为“修改spu”/不变，获取当前页
    else getSpuList(pageNo.value);
}

// sku列表
let skuArr = ref<SkuData[]>([])
let dialogVisible = ref<boolean>(false)

// 查看对应spu的sku列表
const getSkuList = async (id: number) => {
    let result: resSkuInfo = await reqSkuListBySpuId(id)
    if (result.code = 200) {
        skuArr.value = result.data;
        if (skuArr.value.length)
            dialogVisible.value = true
        else ElMessage.warning('暂无SKU信息')
    }
}

// 删除spu
const onDeleteSpu = async (id: number) => {
    let result = await reqDeleteSpu(id);
    if (result.code == 200) {
        ElMessage.success('删除成功')
        // 另一种逻辑是，删除后重新获取当前页；当前页已空，则获取上一页
        getSpuList(records.value.length-1 > 0 ? pageNo.value : pageNo.value - 1)
    }
    else ElMessage.error('删除失败')

}

</script>

<style scoped lang="scss">
.el-card {
    margin: 10px 0;
}

.el-table {
    margin: 10px 0;
}
</style>